/*
 * @Description: 用户收藏
 * @Author: kanglin
 * @Date: 2018-06-11 14:12:50
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@import '~src/assets/css/common.less';
	.collection{
		min-height: 100%;
		background: #f4f4f4;
	}
</style>

<template>
	<div class="collection">
		<back
			v-if="!$status.isWxBrowser()"
			:name="$t('collection.user_center')"
			path="/" />
		<collection-makeups
			v-if="has_makeup"
			:cancel-favors="cancelFavors"
			:fetch-makeups="fetchUserFavors"
			:makeups="makeups" />
		<div v-else>
			<collection-empty />
			<collection-stores :stores="stores"/>
		</div>
	</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import Back from 'src/views/component/back';
import API_LIST from 'src/API_LIST';
import CollectionEmpty from './empty';
import CollectionStores from './stores';
import CollectionMakeups from './Makeups';

export default {
	name: 'Collection',
	components: {
		'collection-empty': CollectionEmpty,
		'collection-stores': CollectionStores,
		'collection-makeups': CollectionMakeups,
		back: Back,
	},
	data() {
		return {
			current_page: 1,
			// per_page: 15,
			makeups: [], // 妆容信息
			is_end: false,
			stores: [],
			has_makeup: true,
		};
	},
	computed: {
		...mapGetters('userInfo', [
			'getUserInfo',
		]),
	},
	methods: {
		...mapActions('collection', [
			'fetchCollectionIndexAction',
		]),

		/**
		 * 请求收藏列表
		 * @return {undefined} {description}
		 */
		fetchUserFavors() {
			const { openid } = this.getUserInfo;
			return this.fetchCollectionIndexAction({ openid, page: this.current_page })
				.then((data) => {
					this.makeups = this.makeups.concat(data.favors.data);
					if (this.makeups.length === 0) {
						this.has_makeup = false;
						this.fetchStoreIndex({ openid });
					}
					if (data.favors.total > this.makeups.length) {
						this.current_page = this.current_page + 1;
					} else {
						this.current_page = data.favors.last_page;
						return Promise.reject(new Error('final'));
					}
				});
		},

		/**
		 *  请求店铺列表
		 * 	@param {String} params {唯一标识}
		 * 	@return {undefined}
		 */
		fetchStoreIndex(params) {
			this.$http.get(API_LIST.STORE_LIST, { params })
				.then(({ data }) => {
					if (data.code !== 0) {
						throw new Error(data.error);
					} else {
						this.stores = data.stores;
					}
				})
				.catch((error) => {
					const toast = this.$createToast({
						type: 'error',
						time: 2000,
						txt: error.message,
					});
					toast.show();
				});
		},

		/**
		 *  取消收藏
		 * 	@param {array} ids {取消收藏图片的id数组集合}
		 * 	@return {undefined}
		 */
		cancelFavors(ids) {
			const { openid } = this.getUserInfo;
			return this.$http.post(API_LIST.DELETE_USER_FAVORS, {
				favor_ids: ids,
				openid,
			})
				.then(({ data }) => {
					if (data.code !== 0) {
						throw new Error(data.error);
					} else {
						this.makeups = this.makeups.filter(item => ids.indexOf(item.id) === -1);
						if (this.makeups.length === 0) {
							this.has_makeup = false;
							this.fetchStoreIndex({ openid }); // 请求店铺
						}
						const toast = this.$createToast({
							type: 'correct',
							time: 2000,
							txt: this.$t('common.operation_success'),
						});
						toast.show();
					}
				})
				.catch((error) => {
					const toast = this.$createToast({
						type: 'error',
						time: 2000,
						txt: error.message,
					});
					toast.show();
				});
		},
	},
};
</script>
